<template>
    <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: 'home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>学生荣誉</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="serch">
        <el-input style="max-width: 600px" placeholder="请输入学号" v-model.trim="serchinfo">
            <template #prepend>
                学号
            </template>
            <template #append>
                <el-button @click="seachhonor"><el-icon>
                        <Search />
                    </el-icon></el-button>
            </template>
        </el-input>
    </div>
    <div class="info" v-if="stuinfo.length!=0">
        <el-descriptions title="学生荣誉信息" border align="center">
            <el-descriptions-item :rowspan="2" :width="140" label="Photo" align="center">
                <el-image style="width: 100px; height: 100px"
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            </el-descriptions-item>
            <el-descriptions-item label="学号" align="center">{{stuinfo.stuid}}</el-descriptions-item>
            <el-descriptions-item label="姓名" align="center">{{stuinfo.name}}</el-descriptions-item>
            <el-descriptions-item label="专业" align="center">{{stuinfo.major_name}}</el-descriptions-item>
            <el-descriptions-item label="年级" align="center">{{stuinfo.grade}}</el-descriptions-item>
            <el-descriptions-item label="奖项" align="center">
                <p v-for="(item,i) in honorinfo " :key="i">
                    {{ item.honor }}   {{ item.create_time }}
                </p>

            </el-descriptions-item>

        </el-descriptions>
    </div>
    <div v-else>
        <el-empty :image-size="200" />
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
import { honor } from '@/apis/stu'
import { ElMessage } from 'element-plus'
const serchinfo = ref<string>('')
const stuinfo = ref<any>([])
const honorinfo = ref<any>([])
const gethonor = async () => {
    const res = await honor({ stuid: serchinfo.value })
    stuinfo.value = res.data.data.stuinfo
    honorinfo.value = res.data.data.honorlist    
}
const seachhonor =()=>{
      if (serchinfo.value == '') return ElMessage({ type: 'warning', message: '请输入搜索的值' })
    gethonor()
}
</script>
<style lang='scss' scoped>
.serch {
    margin-top: 15px;

    .el-button {
        color: #fff;
        background-color: #43a0ff;
    }
}
</style>